<template>
    <div>
        <mian-layout>
            <div class="btnBox" style="padding-bottom:10px">
                <el-button type="success" icon="el-icon-plus" size="mini" @click="opegDg">添加</el-button>
            </div>
            <div class="qyBox">
                <div class="treebox">
                    <el-tree :props="props" 
                    :load="loadNode" 
                    lazy 
                    accordion 
                    :highlight-current="true" 
                    :expand-on-click-node="false"
                    @node-click = "getItem"
                    >
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <span>{{ node.label }}</span>
                            <span>
                                <el-button type="text" size="mini" @click="edit(data)">编辑</el-button>
                                <el-button type="text" size="mini">删除</el-button>
                            </span>
                        </span>
                    </el-tree>
                </div>
                <div class="detailbox">
                    
                </div>
            </div>    
        </mian-layout>
        <my-dialog v-if="dialogVisible" :show.sync="dialogVisible" :showBtn="false" width="500px" title="添加区域">
            <el-form size="small" :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="父ID" prop="parentId">
                    <el-input type="number" v-model="ruleForm.parentId"></el-input>
                    <div style="color:#9999">注：不填默认为一级地标</div>
                </el-form-item>
                <el-form-item label="名称" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>    
            </el-form> 
            <div style="text-align: right">
                <el-button  size="small" @click="dialogVisible=false" icon="el-icon-close">取 消</el-button>
                <el-button type="primary" size="small" icon="el-icon-check" @click="save">确 定</el-button>
            </div>
        </my-dialog> 
    </div>
</template>
<script>
import {mapGetters} from "vuex"
import myTable from '@/components/public/myTable';
import myDialog from '@/components/public/myDialog';
import {
  get_area_list,
  add_area,
  del_area,
  edit_area,
  get_sub_area_list
} from '@/api/collext'
export default {
    components:{
      myTable,
      myDialog
    },
    data(){
        return{
            page:{
                pageSize:10,
                pageIndex:1,
			    total:0,
            },
            loading:true,
            tableData:[],
            multipleSelectionIds:[],
            dataTime:'',
            dialogVisible:false,
            ruleForm:{
                areaId:'',
                parentId:'',
                name:''
            },
            props: {
                label: 'name',
                //children: 'zones',
                isLeaf: 'leaf'
            },
        }
    },
    computed:{
        ...mapGetters({
            'userInfo':'user/userInfo'
        })
    },
    created(){
        this.getList()
    },
    methods:{
        async loadNode(node, resolve) {
            console.log("node:",node)
            if (node.level === 0) {
                const ndata = await this.getList()
                return resolve(ndata);
            }else{
                const ndata2 = await this.getSubList(node.data.areaId)
                return resolve(ndata2); 
            }
        },

        getList(){ 
            return new Promise((resolve,reject) =>{
                get_area_list({
                    limit: this.page.pageSize,
                    page: this.page.pageIndex
                }).then(res=>{
                    this.tableData = []
                    res.data.forEach(item => {
                        if(item.level==1){
                            this.tableData.push(item)
                        }
                    });
                    resolve(this.tableData)
                })
            })
        },
        
        getSubList(parentId){ 
            return new Promise((resolve,reject) =>{
                get_sub_area_list({
                    parentId
                }).then(res=>{
                    setTimeout(()=>{
                        resolve(res.data)
                    },500)
                    
                })
            })
        },
        
        opegDg(){
            this.ruleForm.name = ''
            this.ruleForm.parentId = ''
            this.ruleForm.areaId = ''
            this.dialogVisible=true
        },
        async save(item){
            if(!this.ruleForm.name) return this.$message.warning('请输入区域名称');
            let fn = add_area
            if(this.ruleForm.areaId){
                fn = edit_area
            }
            const res = await fn({...this.ruleForm})
            if(res.success){
                this.$message.success('操作成功')
                !this.ruleForm.areaId &&  (this.page.pageIndex = 1)
                this.getList()
                this.dialogVisible = false
            }else{
                this.$message.error('操作失败');
            }
        },
        del(item) {
            if(item.goodsNum>0) return this.$message.error('该类别下有关联商品，不能删除！');
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const res = await del_area({areaId:item.areaId})
                if(res.success){
                    this.$message.success('删除成功')
                    //this.page.pageIndex = 1
                    this.getList()
                }else{
                    this.$message.error('删除失败');
                }
            }).catch(() => {});
        },
        edit(item){
            this.ruleForm.name = item.name
            this.ruleForm.parentId = item.parentId
            this.ruleForm.areaId = item.areaId
            this.dialogVisible = true
        },
        getItem(item){
            console.log("YYYY:",item)
        }
    }
}
</script>
<style lang="scss" scoped>
    .qyBox{
        display: flex;
        .treebox{
            width: 500px;
        }
        .detailbox{
            flex: 1;
        }
        .custom-tree-node {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            padding-right: 8px;
        }
    }
</style>
<style lang="scss">
    .treebox .el-tree{
        //background: #eee;
    }
    
</style>